<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selectThree</title>
    <link href="/static/js/select2/select2.css" rel="stylesheet">
    <script src="/static/js/jquery/jquery-2.1.0.min.js"></script>
    <script src="/static/js/select2/select2.min.js"></script>
</head>
<body>
<span id="one">
    <select id="levelOne" name="levelOne" placeholder="分类" style="width: 100px">
    </select>
</span>
<span id="two">
    <select id="levelTwo" name="levelTwo" placeholder="分类" style="width: 100px; display: none;">
    </select>
</span>
<span id="three">
    <select id="levelThree" name="levelThree" placeholder="分类" style="width: 160px;  display: none;">
    </select>
</span>
</body>
<script>
    $(function () {
        var oneselect, twoselect, threeselect;
        selectAll();
        selectInit();
    })
    //初始化加载
    function selectInit() {
        selectOne();

        $("#levelOne").on("select2:select", function (e) {
            var levelOne = $("#levelOne").val();
            selectTwo(levelOne);
        });

        $('#levelTwo').on("select2:select", function () {
            var levelTwo = $("#levelTwo").val();
            selectThree(levelTwo);
        });
    }
    //获取所有数据，分类保存到全局数组中，以方便后面使用
    function selectAll() {
        $.ajax({
            url: "rest/category/queryAll",
            type: "get",
            async: false,//注意，必须是同步，不然全局变量取不到值
            dataType: 'json',
            success: function (result) {
                var oneLevel = [];
                var twoLevel = [];
                var threeLevel = [];
                for (var i = 0; i < result.length; i++) {
                    if (result[i].level == "1") {
                        oneLevel.push(result[i]);
                    } else if (result[i].level == "2") {
                        twoLevel.push(result[i]);
                    } else if (result[i].level == "3") {
                        threeLevel.push(result[i]);
                    }
                }
                oneselect = oneLevel;
                twoselect = twoLevel;
                threeselect = threeLevel;
            }
        });
    }

    //取第一类数据
    function selectOne() {

        select2Show("#levelOne", oneselect);

        selectTwo(oneselect[0].cid);
    }
    //取对应的第二层数据
    function selectTwo(parent) {
        var twoTmp = [];
        for (var j = 0; j < twoselect.length; j++) {
            if (twoselect[j].parent == parent) {
                twoTmp.push(twoselect[j])
            }
        }
        ;
        if (twoTmp.length != 0) {
            $("#two").show();
            select2Show("#levelTwo", twoTmp);

            selectThree(twoTmp[0].cid);

        } else {
            twoHide();
            threeHide();
        }
    }
    //取对应的第三层数据
    function selectThree(parent) {
        var threeTmp = [];
        for (var m = 0; m < threeselect.length; m++) {
            if (parent == threeselect[m].parent) {
                threeTmp.push(threeselect[m]);
            }
        }
        ;
        if (threeTmp.length != 0) {
            $("#three").show();
            select2Show("#levelThree", threeTmp);
        } else {
            threeHide();
        }
    }

    function twoHide() {
        $("#levelTwo").empty();
        $("#two").hide();
    }
    function threeHide() {
        $("#levelThree").empty();
        $("#three").hide();
    }
    function select2Show(id, result) {
        if (result.length != 0) {
            var data = [];

            for (var i = 0; i < result.length; i++) {
                var tmp = {};
                tmp["id"] = result[i].cid;
                tmp["text"] = result[i].cname;
                data.push(tmp);
            }

            $(id).empty();
            $(id).select2({
                data: data,
            });
        }
    }
</script>
</html>